<template>
  <div class="login">
    <div class="login-box">
      <div class="container">

        <!-- sms密码登录 -->
        <div class="loginpassword" v-if="isActive == 0">

          <el-form :model="ruleForm" ref="ruleForm" label-position="rigth">
            <el-form-item class="myitem">
              <el-input placeholder="手机号" prefix-icon="el-icon-mobile-phone" v-model="ruleForm.phone"></el-input>
            </el-form-item>
            <el-form-item class="check myitem">
              <el-input auto-complete="new-password" placeholder="密码" :type="ispassword" autocomplete="off"
                prefix-icon="el-icon-lock" v-model="ruleForm.password"></el-input>
              <div class="openimage" @click="isOpen">
                <img class="open" :src="passcheck.hide" v-show="isicon == true" alt="" />
                <img class="open" :src="passcheck.open" v-show="isicon == false" alt="" />
              </div>
            </el-form-item>
            <el-form-item id="codeBox">
              <el-input auto-complete="new-password" placeholder="验证码" class="code" autocomplete="off"
                prefix-icon="el-icon-lock" v-model="ruleForm.code"></el-input>
              <el-form-item>
                <el-button style="width: 160px" class="codebtn btn" :disabled="isDisabled" type="primary"
                  @click="sendCode">{{ buttonText }}</el-button>
              </el-form-item>
            </el-form-item>
          </el-form>
          <div class="password-setting">
            <div>
              <el-checkbox el-checkbox v-model="checked">记住密码</el-checkbox>
            </div>
            <div class="forget"><router-link to="/forget-password">忘记密码？</router-link></div>
          </div>
          <div class="error" v-show="errmessage.err">
            <i class="el-icon-warning"></i>
            <span>{{ errmessage.message }}</span>
          </div>
          <el-button type="primary" @click="getLogin(ruleForm)">登录</el-button>
          <div class="register" @click="goRegister()">立即注册</div>
        </div>
        <!-- 验证码登录 -->
        <Verification v-else></Verification>
      </div>
    </div>
  </div>
</template>
<script>
  import {
    mapGetters,
    mapActions
  } from "vuex";
  import Verification from "./components/verification.vue";

  export default {
    name: "login",
    components: {
      Verification,
    },
    data() {
      return {
        buttonText: "获取验证码",
        isicon: true,
        ispassword: "password",
        isDisabled: false, // 是否禁止点击发送验证码按钮
        passcheck: {
          hide: require("@/assets/images/login/hide.png"),
          open: require("@/assets/images/login/open.png"),
        },
        land: [{
            id: 0,
            name: "密码登录"
          },
          {
            id: 1,
            name: "验证码登录"
          },
        ],
        ruleForm: {
          //手机号登录
          phone: "",
          password: "",
          code: "",
        },
        isActive: 0,
        errmessage: {
          err: false,
          message: "",
        },
        checked: true,
      };
    },
    mounted() {},
    methods: {
      ...mapActions(["passwordCodeLogin", "sendSms"]),
      isLogin(index) {
        this.isActive = index;
      },
      isOpen() {
        this.isicon = !this.isicon;
        if (this.isicon == true) {
          this.ispassword = "password";
        } else {
          this.ispassword = "text";
        }
      },
      getLogin() {
        if (!this.ruleForm.phone) {
          this.errmessage = {
            err: true,
            message: "请输入手机号",
          };
        } else if (!/^1[3|4|5|7|8|9][0-9]\d{8}$/.test(this.ruleForm.phone)) {
          this.errmessage = {
            err: true,
            message: "手机号错误，请重输入",
          };
        } else if (!this.ruleForm.password) {
          this.errmessage = {
            err: true,
            message: "请输入密码",
          };
        } else if (!this.ruleForm.code) {
          this.errmessage = {
            err: true,
            message: "请输入验证码",
          };
        } else {
          this.passwordCodeLogin(this.ruleForm).then((res) => {
            this.$message({
              message: '恭喜你，登录成功',
              type: 'success'
            });
            this.$router.push({
              name: 'index'
            })
          });
        }
      },
      goRegister() {
        this.$router.push({
          name: "register",
        });
      },
      // 发送验证码
      sendCode() {
        if (this.checkPhone()) {
          this.changeBtnText();
          this.sendSms({
            mobile: this.ruleForm.phone,
            type: 3
          }).then((res) => {
            this.changeBtnText();
          });
        }
      },
      changeBtnText() {
        let time = 60;
        this.isDisabled = true;
        this.buttonText = "已发送（" + time + " s）";
        let timer = setInterval(() => {
          time--;
          this.buttonText = "已发送（" + time + " s）";
          if (time === 0) {
            clearInterval(timer);
            this.buttonText = "重新获取";
            this.isDisabled = false;
          }
        }, 1000);
      },
      checkPhone() {
        if (!this.ruleForm.phone) {
          this.errmessage = {
            err: true,
            message: "请输入手机号",
          };
          this.canSubmit = false;
        } else if (!/^1[3|4|5|7|8|9][0-9]\d{8}$/.test(this.ruleForm.phone)) {
          this.errmessage = {
            err: true,
            message: "手机号错误，请重输入",
          };
          this.canSubmit = false;
        } else {
          this.errmessage = {
            err: false,
            message: "",
          };
          this.canSubmit = true;
        }
        return this.canSubmit;
      },
      handForgetPassword() {
        console.log("ffffff")
      }
    },
    computed: {},
  };
</script>
<style scoped>
  .login {
    width: 100%;
    height: 100vh;

    background: url(../../../assets/images/login/login.png) no-repeat center;
    background-size: 100% 100%;
    position: relative;
  }

  .login-box {
    width: 560px;
    height: 530px;
    background: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -55%);
  }

  .container {
    width: 460px;
    padding: 0 50px;
  }

  .header {
    display: flex;
    justify-content: space-around;
    margin-top: 50px;
    font-size: 18px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #999999;
    line-height: 50px;
    cursor: pointer;
  }

  .header-active {
    width: 80px;
    height: 2px;
    margin: 0 auto;
  }

  .active {
    background: #0e93e4;
  }

  .el-form {
    margin-top: 35px;
    font-size: 16px;
  }

  .el-form-item {
    margin: 0;
  }

  .el-form-item__content .el-input /deep/ .el-input__icon {
    font-size: 18px;
    line-height: 60px;
    margin: 0 20px 0 21px;

  }

  .myitem {
    margin: 0 0 30px 0;
  }

  .el-form-item__content .el-input /deep/ .el-input__inner {
    height: 60px;
    /* margin: 15px 0; */
    font-size: 16px;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #333333;
    padding-left: 60px;
    line-height: 60px;
  }

  .password-setting {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 15px 0 17px 0;
  }

  .el-checkbox[data-v-14dddfbe] {
    line-height: 0;
  }

  .el-checkbox {
    width: 57px;
    height: 13px;
    font-size: 14px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #333333;
  }

  .forget {
    cursor: pointer;
  }

  .error {
    width: 460px;
    height: 28px;
    background: #feefef;
    border: 1px dashed #ffd5d5;
    font-size: 12px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #ff1e1e;
    line-height: 28px;
  }

  .error i {
    font-size: 14px;
    margin: 0 10px;
  }

  .el-button {
    width: 460px;
    height: 60px;
    background: #0B4696;
    /* box-shadow: 0px 7px 27px 0px rgba(50, 129, 255, 0.51); */
    border-radius: 2px;
    /* margin-top: 17px; */
    font-size: 18px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #ffffff;
    line-height: 15px;
    letter-spacing: 4px;
  }

  .register {
    width: 57px;
    font-size: 14px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #0e93e4;
    margin-top: 35px;
    float: right;
    cursor: pointer;
  }

  .code {
    width: 280px;
    padding-top: 0;
    margin-bottom: 42px;
  }

  .btn {
    margin-left: 20px;
    width: 160px;
    height: 60px;
    font-size: 16px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    /* margin-top: 20px; */
    text-align: center;
    /* line-height: 60px; */
    cursor: pointer;
  }

  .codebtn {
    background: #f1f7ff;
    color: #0B4696;
    border: none;
  }

  .passbtn {
    background: #f2f2f2;
    color: #999999;
  }

  .el-form-item /deep/ .el-form-item__content {
    display: flex;
  }

  .open {
    width: 60px;
    height: 60px;
    position: absolute;
    top: 0px;
    right: 0px;
    cursor: pointer;
  }

  .forget a {
    color: #333333;
    font-family: Source Han Sans CN;
    font-weight: 400;
  }

  .loginpassword {
    margin-top: 70px;
  }

  .forget a:hover {
    cursor: pointer;
    color: #409EFF;
  }

  #codeBox {
    height: 57px;
  }

  #codeBox /deep/ .el-form-item__content {
    height: 57px;
  }
</style>